<template>
  <div id="assetManage">
    <SearchForm v-model="ruleForm" :dataJ="dataJ" @search-form="searchForm" />
    <BkBtn :btnConfig="btnConfig" />
    <div class="card-box" :class="{ noData: !tableData.length }">
      <el-row :gutter="20">
        <el-checkbox-group v-model="checkList">
          <el-col :span="6" v-for="(item, ind) in tableData" :key="ind">
            <el-card class="box-card" shadow="hover">
              <div slot="header" class="clearfix">
                <el-checkbox :label="item.carNumber">&nbsp;</el-checkbox>
                <span class="carPlate">{{ item.carNumber }}</span>
                <el-tag effect="dark" type="danger" v-if="item.locked == 1">{{
                  item.lockedName
                }}</el-tag
                >&nbsp;
                <el-tag effect="dark">{{ item.carStatusName }}</el-tag>
                <el-button
                  style="float: right; padding: 5px"
                  type="success"
                  icon="el-icon-edit"
                  circle
                  @click="editCar(item)"
                ></el-button>
              </div>
              <div class="item">
                <img
                  class="img"
                  :src="`${item.files.doMain}${item.files.fileUrl}`"
                  alt=""
                />
                <div class="info">
                  <div>品牌：{{ item.carBrand }}</div>
                  <div>型号：{{ item.carModel }}</div>
                  <div>年限：{{ item.carYear }}</div>
                  <div>里程：{{ item.carMileage }}</div>
                  <div>价格：{{ item.carPrice }}</div>
                  <div>场站：{{ item.stationId.stationName }}</div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-checkbox-group>
      </el-row>
    </div>
    <div class="page-box">
      <BkPage :total="total" :page="page" />
    </div>

    <el-dialog
      :title="dialogTitle"
      width="600px"
      :visible.sync="dialogVisible"
      :before-close="cancelDia"
    >
      <div class="dialog-main">
        <el-form
          :model="appForm"
          :rules="rules"
          ref="appForm"
          label-width="60px"
          class="demo-ruleForm"
        >
          <el-form-item label="车牌" required v-if="formType">
            <el-col :span="4">
              <el-form-item prop="carAreaCh">
                <el-select
                  v-model="appForm.carAreaCh"
                  filterable
                  clearable
                  placeholder="请选择"
                >
                  <el-option
                    v-for="(value, ind) in provinceChKey"
                    :key="ind"
                    :label="value"
                    :value="value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item prop="carAreaEn">
                <el-select
                  v-model="appForm.carAreaEn"
                  filterable
                  clearable
                  placeholder="请选择"
                >
                  <el-option
                    v-for="(value, ind) in provinceEnKey"
                    :key="ind"
                    :label="value"
                    :value="value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="1">
              <div class="dian">
                <span class="circle"></span>
              </div>
            </el-col>
            <el-col :span="15">
              <el-form-item prop="carNum">
                <el-input
                  v-model="appForm.carNum"
                  @input="writeW($event, 'carNum')"
                  :maxlength="5"
                  show-word-limit
                  placeholder="请输入"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-form-item>
          <el-form-item label="车牌" v-if="!formType">
            {{ appForm.carNumber }}
          </el-form-item>
          <el-form-item label="品牌" prop="carBrand">
            <el-input
              v-model="appForm.carBrand"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="型号" prop="carModel">
            <el-input
              v-model="appForm.carModel"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="年限" prop="carYear">
            <el-input
              v-model="appForm.carYear"
              @input="writeN($event, 'carYear')"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="里程" prop="carMileage">
            <el-input
              v-model="appForm.carMileage"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="价格" prop="carPrice" class="">
            <el-col :span="22">
              <el-input
                v-model="appForm.carPrice"
                placeholder="请输入"
              ></el-input>
            </el-col>
            <el-col :span="2">/ 天</el-col>
          </el-form-item>
          <el-form-item label="场站" prop="stationId">
            <!-- <el-input v-model="appForm.carStation"></el-input> -->
            <el-select
              v-model="appForm.stationId"
              filterable
              clearable
              placeholder="请选择"
            >
              <el-option
                v-for="(item, ind) in stationList"
                :key="item._id"
                :label="item.stationName"
                :value="item._id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="图片" prop="fileList">
            <UploadFile
              :fileList="appForm.fileList"
              :limit="1"
              @uploadImgSuccess="uploadSuccess"
              @removeImg="removeImg"
            />
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelDia">取 消</el-button>
        <el-button type="primary" plain @click="sureDia">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import UploadFile from "@/components/uploadFile/upload.vue";
import {
  getCarList,
  createCar,
  updateCar,
  lockedCar,
  handlePackCar,
} from "@/api/car";

import { stationLists } from "@/api/stations";

import { mapGetters } from "vuex";

export default {
  name: "",
  components: { UploadFile },
  data() {
    return {
      ruleForm: {},
      dialogVisible: false,
      dialogTitle: "",
      Fn: createCar,
      tableData: [],
      page: {
        pageSize: 12,
        pageNum: 1,
      },
      total: 0,
      appForm: {
        // 弹框数据
        carAreaCh: "",
        carAreaEn: "",
        carNum: "",
        carBrand: "",
        carModel: "",
        carYear: "",
        carPrice: "",
        stationId: "",
        stationName: "",
        fileList: [],
      },
      rules: {
        carAreaCh: [{ required: true, message: "请选择", trigger: "change" }],
        carAreaEn: [{ required: true, message: "请选择", trigger: "change" }],
        carNum: [
          { required: true, message: "请输入车牌号后5位", trigger: "blur" },
        ],
        carBrand: [{ required: true, message: "请输入品牌", trigger: "blur" }],
        carModel: [{ required: true, message: "请输入型号", trigger: "blur" }],
        carYear: [{ required: true, message: "请输入年限", trigger: "blur" }],
        carMileage: [
          { required: true, message: "请输入里程", trigger: "blur" },
        ],
        carPrice: [{ required: true, message: "请输入价格", trigger: "blur" }],
        stationId: [
          { required: true, message: "请选择场站", trigger: "change" },
        ],
        fileList: [{ required: true, message: "请上传图片", trigger: "blur" }],
      },
      checkList: [],
      stationList: [],
      formType: false,
    };
  },
  computed: {
    ...mapGetters(["provinceChKey", "provinceEnKey"]),
    dataJ() {
      return [
        {
          label: "车牌号",
          prop: "carNumber",
          type: "input",
        },
      ];
    },
    btnConfig() {
      return [
        {
          label: "新增",
          Fn: this.addCar,
          icon: "el-icon-plus",
        },
        {
          label: "锁定",
          Fn: this.lockCar,
          icon: "el-icon-lock",
        },
        {
          label: "解锁",
          Fn: this.unlockCar,
          icon: "el-icon-unlock",
        },
        {
          label: "整备",
          Fn: this.packCar,
          icon: "el-icon-time",
        },
      ];
    },
  },
  watch: {},
  created() {},
  mounted() {
    this.getList();
  },
  methods: {
    searchForm() {
      this.page.pageNum = 1;
      this.getList();
    },
    async getList() {
      let data = {
        ...this.page,
        ...this.ruleForm,
      };
      let res = await getCarList(data);
      this.checkList = [];
      this.tableData = res.records;
      this.total = res.total;
    },
    uploadSuccess(event) {
      if (event.status == "ok") {
        this.appForm["fileList"].push(event.data);
      } else {
        this.$message({
          type: "error",
          message: event.data,
        });
      }
    },
    removeImg(file, index) {
      this.appForm["fileList"].splice(index, 1);
    },
    cancelDia() {
      this.dialogVisible = false;
      this.appForm = this.$options.data().appForm;
      this.$refs["appForm"].resetFields();
    },
    addCar() {
      // 新增系统参数
      this.dialogVisible = true;
      this.getStationList();
      this.Fn = createCar;
      this.dialogTitle = "新增车辆";
      this.formType = true;
    },
    async getStationList() {
      this.stationList = await stationLists();
    },
    editCar(row) {
      // 编辑系统参数
      this.dialogVisible = true;
      this.getStationList();
      this.Fn = updateCar;
      this.dialogTitle = "修改车辆信息";
      this.formType = false;
      this.$nextTick(() => {
        this.appForm = JSON.parse(JSON.stringify(row));
        const fileList = [
          {
            doMain: row.files.doMain,
            filePath: row.files.fileUrl,
            url: `${row.files.doMain}${row.files.fileUrl}`,
          },
        ];
        this.$set(this.appForm, "stationId", this.appForm.stationId._id);
        this.$set(this.appForm, "fileList", fileList);
      });
    },
    sureDia() {
      this.$refs["appForm"].validate((vaild) => {
        if (vaild) {
          // 验证通过
          let msgInfo = "";
          let data = {
            ...this.appForm,
            carUrl: this.appForm.fileList[0].filePath,
          };
          if (this.Fn == createCar) {
            msgInfo = "新增车辆成功";
            data.carNumber = `${this.appForm.carAreaCh}${this.appForm.carAreaEn}·${this.appForm.carNum}`;
          } else if (this.Fn == updateCar) {
            msgInfo = "修改车辆信息成功";
          }

          this.Fn(data).then(() => {
            this.$message.success(msgInfo);
            this.cancelDia();
            this.getList();
          });
        }
      });
    },
    writeW(event, prop) {
      this.appForm[prop] = event.replace(/[^a-z0-9A-Z]/g, "");
    },
    writeN(event, prop) {
      this.appForm[prop] = event.replace(/[^0-9]/g, "");
    },
    unlockCar() {
      this.handleCar(2);
    },
    lockCar() {
      this.handleCar(1);
    },
    async handleCar(val) {
      if (!this.checkList.length) {
        this.$message({
          type: "warning",
          message: "未选择车辆",
        });
        return;
      }
      await lockedCar({ carList: this.checkList, locked: val });
      this.$message({
        type: "success",
        message: "操作成功",
      });
      this.getList();
    },
    async packCar() {
      if (!this.checkList.length) {
        this.$message({
          type: "warning",
          message: "未选择车辆",
        });
        return;
      }
      await handlePackCar({ carList: this.checkList });
      this.$message({
        type: "success",
        message: "操作成功",
      });
      this.getList();
    },
  },
};
</script>

<style scoped lang="less">
#assetManage {
  padding: 0 20px;
  background: #fff;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .card-box {
    flex: auto;
    overflow: auto;
    height: 0;
    overflow-x: hidden;
    padding-right: 12px;
    .el-col {
      margin-bottom: 20px;
      .item {
        .img {
          width: 200px;
          height: 200px;
        }
      }
      .carPlate {
        margin-right: 10px;
      }
    }
  }
  .page-box {
    padding: 10px;
    text-align: right;
  }
  .demo-ruleForm {
    .el-col {
      padding-right: 10px;
      &:last-child {
        padding: 0;
      }
      .dian {
        text-align: center;
        .circle {
          display: inline-block;
          width: 5px;
          height: 5px;
          background-color: #000;
          border-radius: 20px;
        }
      }
      .el-form-item {
        margin-bottom: 0;
      }
    }
    ::v-deep .el-select {
      width: 100%;
    }
  }
  .card-box {
    .item {
      display: flex;
      .info {
        flex: 1;
        margin-left: 10px;
        line-height: 30px;
      }
    }
  }
}
</style>
